<!--  -->
<template>
  <span ref="numberGrow" :data-time="time" class="number-grow">{{ baseValue }}</span>
</template>

<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'
interface Props {
  time?: number
  value?: number
}
const baseValue = ref(0)
const props = withDefaults(defineProps<Props>(), {
  time: 1,
  value: 0
})
const { time, value } = toRefs(props)

// const numberGrowRef = ref<HTMLElement>()
const numberGrow = () => {
  let step = Math.floor((value.value * 10) / time.value)
  let current = 0
  let start = 0
  let t: number | null = setInterval(function () {
    start += step
    if (start > value.value) {
      if (t) {
        clearInterval(t)
      }
      start = value.value
      t = null
    }
    if (current === start) {
      return
    }
    current = start
    baseValue.value = current
  }, 10)
}
watch(
  value,
  () => {
    numberGrow()
  },
  {
    immediate: true
  }
)
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
